<template>
    <ul class="right-list-container">
        <li v-for="item in list" :key="item.id">
            <span class="cate" :class="is_active(item)" @click="handle(item)">
                {{ item.name }}
            </span>
            <!-- <router-link   
                class="cate"
                :class="is_active(item)"
                :to="{ name: 'CategoryBlog', params: { cate_id: item.id } }"
            >
                {{ item.name }}
            </router-link> -->
            <span class="count">数量：{{ item.articleCount }}</span>
            <!-- 捕获子组件的 select 事件，让父级处理（vue 会自动传入参数） -->
            <RightList
                :list="item.children"
                @select="handle"
                v-if="item.children"
            />
        </li>
    </ul>
</template>

<script>
export default {
    // 注册了名字后，就可以递归调用组件
    name: "RightList",
    props: {
        list: {
            type: Array,
            default: () => [] // 使用函数返回一个新的数组
        }
    },
    methods: {
        handle(item) {
            this.$emit("select", item)
        },
        is_active(item) {
            if (item.active || item.id === +this.$route.params.cate_id) {
                return "active"
            }
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.right-list-container {
    text-align: left;
    margin-top: 10px;
    .cate {
        font-size: 16px;
        &.active {
            color: @warn;
        }
        &:hover {
            color: @primary;
        }
    }
    .count {
        font-size: 12px;
        color: @secondary;
    }
    li {
        min-height: 30px;
    }
    .right-list-container {
        padding-left: 17px;
    }
}
</style>
